---
comments: false
---

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>春联</title>
  <script src="../poem/leancloud.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
  <link rel="stylesheet" href="../poem/loading.css">
  <link rel="stylesheet" href="../poem/leancloud.css">
</head>
<style>
  .item1 {
    /* 或任何你想要的百分比 */
    margin-bottom: -20px;
    margin-right: 15px;
  }

  .item2 {
    flex-grow: 1;
    /* 这将占据剩余的所有空间 */
  }

  #containers {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
  }

  #backButton {
    background-image: url('images/back.png');
    width: 20px;
    height: 20px;
    background-size: cover;
    cursor: pointer;
    /* background-color: #666; */
  }
</style>

<body>

  <div id="containers">
    <div id="backButton" class="item1"></div>
    <div id="search" class="item2">

      <form class="search-form" action="javascript:return true" autocomplete="off" onsubmit="return false;">
        <div class="search-input">

          <input maxlength="80" type="search" class="search-input" id="search-input" placeholder="请输入关键字..."
            required="">

        </div>
      </form>
    </div>
  </div>

  <!-- 加载动画 -->
  <div class="loading">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="data">
    <div id="poem-list"></div>
    <div id="pagination">
      <div id="buttonContainer">
        <div id="moreButton"></div>
      </div>
    </div>
  </div>
  <script>

    localStorage.removeItem('searchSpringCoupletKeyword', "");
    var elements = document.querySelector('.post-title__text');
    elements.textContent = '春联'

    var postTitle = document.querySelector('.post-title');
    postTitle.style.display = 'none';
    var headeRight = document.querySelector('.header__right');
    headeRight.style.display = 'none';
    var headeLeft = document.querySelector('.header__left');
    headeLeft.style.display = 'none';

    var currentPage = 1;
    var pageSize = 10; // 每页显示的条目数
    initLeanCloud()
    requestSpringCouplet(currentPage, pageSize, '', handleData)
    var img = document.getElementById('moreButton');;
    img.addEventListener('click', function () {
      currentPage++;
      var keyword = localStorage.getItem('searchSpringCoupletKeyword');
      if (keyword == null) {
        keyword = ""
      }
      console.log('keyword:', keyword);
      requestSpringCouplet(currentPage, pageSize, keyword, handleData)
    });
    function handleData() {
      console.log('获取到的数据为：');
      // 在这里处理获取到的数据，例如更新页面内容等
      var data = document.querySelector('.data');
      var loading = document.querySelector('.loading');
      loading.style.display = 'none'; // 隐藏loading动画
      data.style.opacity = 0.8; // 显示数据

    }
    // 监听搜索输入框
    document.addEventListener('DOMContentLoaded', function () {
      var inputElement = document.getElementById('search-input');
      inputElement.value = '';
      inputElement.addEventListener('input', function (event) {
        // 实时获取输入框中的内容
        var inputValue = inputElement.value;
        console.log('输入内容为: ' + inputValue);
        // localStorage.setItem('searchPoemKeyword', inputValue);
        // clean()
        // requestData(currentPage,pageSize,inputValue,handleData);
      });
      inputElement.addEventListener('keyup', function (event) {
        if (event.key === 'Enter') {
          // 用户按下了回车键，执行相应的操作
          console.log('用户按下了回车键');
          var inputValue = inputElement.value;
          console.log('搜索内容为：' + inputValue);

          localStorage.setItem('searchSpringCoupletKeyword', inputValue);
          clean()
          requestSpringCouplet(currentPage, pageSize, inputValue, handleData);
          // 在这里添加你想要执行的操作
        }
      });
    });
    var img = document.getElementById('backButton');
    img.addEventListener('click', function () {
      window.history.back()
    });
  </script>
</body>

</html>